<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>

    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./common.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        th,
        td {
            width: 200px;
            height: 30px;
            background-color: #ccc97dbb;
            text-align: left;
            font-size: 20px;
        }

        th {
            font-size: 20px;
            background-color: gold;

        }

        body {
            /* 设置body高度为100%窗口高度 */
            height: 100%;
            width: 100%;
            /* 弹性盒子模型 */
            background: #ADA996;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }

        /* 导航栏 */
        .home-nav {
            background: linear-gradient(45deg, #8da5ba, #778b9d);
            box-shadow: 8px -8px 16px #9fa6ac,
                -8px 8px 16px #a4afb9;
        }

        .layui-nav .userInfo {
            float: right;
        }

        .layui-nav-bar {
            background-color: #9eb9d1;
        }

        /* 新闻详情 */
        .news-content {
            width: 600px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 100px;

            margin-top: 20px;
        }

        .news-discuss {
            width: 600px;
            height: 300px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .news-discuss textarea {
            width: 600px;
            height: 200px;
            resize: none;

        }

        .news-discuss .layui-btn {
            background: #b5b1a1;
            float: right;
        }
    </style>
</head>

<body>
    <div class="home-nav">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">导航</a></li>

            <li class="layui-nav-item userInfo"><a href="">登录</a></li>
        </ul>
    </div>
    <h1>新闻标题</h1>
    <!-- 新闻详情 -->
    <div class="news-content">6</div>

    <!-- 新闻评论 -->
    <div class="news-discuss">
        <textarea cols="30" rows="10">wq6</textarea>
        <button class="layui-btn addComment" type="button">发布评论</button>

    </div>

    <ol class="news-discuss-ol" style="margin-top: 20px; width: 610px; margin-left: auto; margin-right: auto;">
        <div>
            <table>
                <thead>

                    <tr>
                        <th>
                            评论内容
                        </th>
                        <th>用户ID</th>
                        <th>
                            操作
                        </th>
                    </tr>
                    <hr>
                </thead>

                <tbody>

                </tbody>
            </table>
        </div>
    </ol>

</body>
<script>
    let userInfo = getCookie("userInfo") ? JSON.parse(getCookie('userInfo')) : null;
    // 判断登录与否
    if (userInfo) {
        document.querySelector(".userInfo").innerHTML = `${userInfo.mobile}用户欢迎`
    } else {
        document.querySelector(".userInfo").innerHTML = `<a href="login_pro.html">登录</a>`
    }

    // 显示评论
    // 获取到新闻id
    let newsId = getUrlParam("id")
    ajax({
        url: "http://phpclub.org.cn/edu/server/getContent.php",
        data: {
            id: newsId
        },
        // success函数 显示新闻内容
        sccuess: function (response) {
            document.querySelector("h1").innerHTML = response.data.title;
            // console.log(response.data);
            document.querySelector('.news-content').innerHTML = response.data.content
        }
    })
    // 发布评论
    document.querySelector('.addComment').onclick = function () {
        if (!userInfo) {
            // 说明用户目前没有登录  跳转到登录页
            // encodeURIComponent是js中内置函数 将字符串转换为URL编码格式 
            location.href = 'login.html?backdata=' + encodeURIComponent(location.href);
            return;
        }
        // 说明用户已经登录
        ajax({
            url: 'http://phpclub.org.cn/edu/server/addComment.php',
            type: 'post',
            data: {
                userId: userInfo.id,
                newsId,
                content: document.querySelector('textarea').value
            },
            success: function (backData) {
                console.log(backData)
            }
        });
    }
    let tbody = document.querySelector("tbody");

    // 添加评论
    let newsData = null;
    // 封装init函数 确认用户登录并且得到ID
    function init() {
        let data = {
            newsId,
            page: 1,
            pageSize: 15
        }
        if (userInfo) {
            // 用户登录
            data.userId = userInfo.id;
        }
        ajax({
            url: 'http://phpclub.org.cn/edu/server/getComment.php',
            data,
            success: function (response) {
                newsData = response.data;
                let html = '';

                response.data.forEach(item => {
                    html += `<tr>
                    
                    <td>${item.content}</td>
                    <td>${item.user_id}</td>
                    <td>
                        <button class="good">点赞</button>
                        <button class="del">删除</button>
                        <span class='good_count'>点赞：${item.good_count}</span>  
                    </td>
                </tr>`
                })

                document.querySelector('tbody').innerHTML = html;
            }
        })
    }
    // 调用init
    init();
    // 删除
    // 事件监听实现删除
    document.querySelector("tbody").addEventListener("click", function (e) {
        if (e.target.className == "del") {
            let delList = document.querySelectorAll('.del');
            let index = [...delList].indexOf(e.target)

            // 获取评论Id
            let commentId = newsData[index].id;
            ajax({
                url: 'http://phpclub.org.cn/edu/server/deleteComment.php',
                data: {
                    userId: userInfo.id,
                    commentId
                },
                success: function (response) {
                    init();
                }
            })
        }
        // 点赞
        if (e.target.className == "good") {
            let goodList = document.querySelectorAll(".good")
            let index = [...goodList].indexOf(e.target)
            // 获取评论id
            let commentId = newsData[index].id;
            ajax({
                url: 'http://phpclub.org.cn/edu/server/commentLike.php',
                data: {
                    userId: userInfo.id,
                    commentId
                },
                success: function (response) {
                    let good_count = document.querySelectorAll(".good_count");
                    // 点赞加一
                    good_count[index].innerHTML++;
                    // 调用函数init
                    init()
                }
            })
        }

    })
</script>

</html>